<template>
  <div class="market_result">
    <div class="header">
      <router-link to="Market_index"><span></span></router-link>
      <input type="text" placeholder="搜索商品" v-on:click="to_searchPage()"/>
      <span v-on:click="show_nav()">···</span>

      <div class="nav_block" v-if="nav_flag">
        <router-link to="/Home"><p><span class="glyphicon glyphicon-home"></span>首页</p></router-link>
        <router-link to="/Market"><p><span class="glyphicon glyphicon-list-alt"></span>分类搜索</p></router-link>
        <router-link to="/Cart"><p><span class="glyphicon glyphicon-shopping-cart"></span>购物车</p></router-link>
        <router-link to="/Mine"><p><span class="glyphicon glyphicon-user"></span>我的</p></router-link>
      </div>
    </div>
    <div class="result_content">
      <nav>
        <ul>
          <li @click="sortByDefault()">综合</li>
          <li @click="sortBySell()">销量</li>
          <li @click="sortByPrice()" v-bind:class="{'price':sort_price,'dir_price':logo_dir}">价格</li>
          <li @click="sortByComment()">评论</li>
          <li><span v-bind:class="['glyphicon' ,{'glyphicon-th-large':!list_style , 'glyphicon-th-list':list_style}]"
                    v-on:click="change_style()"></span></li>
        </ul>
      </nav>
      <menu v-bind:class="{ default_style: def_style , other_style : !def_style }">
        <ul class="clear">
          <li v-for="item of market_result">
            <router-link to="/detail" class="clear">
              <img v-bind:src="item['img_url']" alt=""/>

              <div><h3><span v-if="item['help_self']">自营</span><span v-text="item['category_name']"></span></h3>

                <p v-show="item['eng_name']" v-text="item['eng_name']"></p>
                <span v-text="item['price']"></span>
              </div>
            </router-link>
          </li>
        </ul>
      </menu>
    </div>
  </div>
</template>
<script>
  import jquery from "jquery"
  export default {
    name: 'market_result',
    data: function () {
      return {
        msg: 'market_result',
        show_list: false,
        nav_flag: false,
        def_style: false,
        inputContent: "",
        market_result: [],
        apiUrl: "../../../static/market_result.json",
        anchor: 0,
        sort_price: false,
        logo_dir: false,
        list_style: false,
      }
    }
    , created: function () {
      var _this = this;
      this.$http.get(this.apiUrl)
        .then(function (res) {
          jquery.get('http://www.beautifulmelody.top/market.php?uname=&pwd=&type=%E6%89%80%E6%9C%89', function (data) {
            window.arr = JSON.parse(data).data;
            window.arr.sort(function (a, b) {
              return a["id"] - b["id"];
            });
            _this.market_result = window.arr;
          })
        })
        .catch(function (err) {
          console.log(err)
        })
    }, methods: {
      to_searchPage: function () {
        this.$router.push({path: "/Market/Market_search"})
      },
      show_nav: function () {
        this.nav_flag = !this.nav_flag;
      },
      change_style: function () {
        this.def_style = !this.def_style;
        this.list_style = !this.list_style;
      },
      sortByDefault: function () {
        console.log("排序，依据，默认");
        this.sort_price = false;
        this.logo_dir = false;
        this.anchor = 0;
        this.market_result.sort(function (a, b) {
          return a["id"] - b["id"];
        });
      },
      sortBySell: function () {
        console.log("排序，依据，销量");
        this.sort_price = false;
        this.logo_dir = false;
        this.anchor = 0;
        this.market_result.sort(function (a, b) {
          return b["sell_num"] - a["sell_num"];
        });
      },
      sortByPrice: function () {
        var _this = this;
        console.log("排序，依据，价格");
        this.sort_price = true;
        this.logo_dir = (this.anchor % 2);
        this.anchor++;
        this.market_result.sort(function (a, b) {
          return (_this.anchor % 2) ? (a["price"] - b["price"]) : (b["price"] - a["price"])
        });
      }, sortByComment: function () {
        console.log("排序，依据，评论");
        this.sort_price = false;
        this.logo_dir = false;
        this.anchor = 0;
        console.log(this.market_result)
        this.market_result.sort(function (a, b) {
          return b["id"] - a["id"];
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  
  .market_result {
  overflow: hidden;
  background-color: whitesmoke;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: +200;
  top: 0;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.15rem;
  height: 1.15rem;
  text-align: center;
  background: white;
  border-bottom: 1px solid lightgrey;
  z-index: +2;
  input {
    background: whitesmoke;
    border: 1px solid lightgrey;
    line-height: 0.71rem;
    font-size: 0.35rem;
    padding-top: 0.05rem;
    border-radius: 0.15rem;
    width: 73%;
    outline: none;
    text-indent: 0.2rem;
    a {
      display: block;
      width: 100%;
      color: grey;
      span {
        padding-right: 0.1rem;
      }
    }
  }
  & > a, & > span {
    width: 10%;
    display: inline-block;
    position: relative;
    color: grey;
    span {
      position: absolute;
      top: -0.28rem;
      left: 0.25rem;
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      &:after {
        transform: rotateZ(45deg);
        display: block;
        width: 0.28rem;
        height: 0.28rem;
        content: "";
        border: 1px solid grey;
        border-width: 0 0 1px 1px;
      }
    }
  }
  & > span {
    font-size: 1rem;
    line-height: 0;
    position: relative;
    top: 0.2rem;
  }
  .nav_block {
    text-align: left;
    position: absolute;
    top: 1.2rem;
    right: 0.2rem;
    height: 3.5rem;
    border-radius: 0.15rem;
    width: 2.8rem;
    background: black;
    z-index: +1;
    a {
      p {
        line-height: 0.85rem;
        font-size: 0.35rem;
        span {
          padding: 0 0.3rem;
        }
        color: white;
      }
    }
  }
  .nav_block:after {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    background: black;
    content: "";
    top: -0.15rem;
    right: 0.4rem;
    transform: rotateZ(45deg);
  }
}

.result_content {
  padding-top: 1.1rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  nav {
    position: relative;
    top: 0;
    ul {
      display: flex;
      flex-wrap: nowrap;
      border-bottom: 1px solid lightgrey;
      justify-content: space-between;
      li {
        text-align: center;
        width: 21%;
        background: white;
        line-height: 1.1rem;
        font-size: 0.4rem;
        span {

        }
      }
      li:last-child {
        width: 15%;
      }
      .price {
        color: red;
        position: relative;
        &:after {
          content: "△";
          position: absolute;
          top: 50%;
          line-height: 0;
          right: 0.25rem;
          transform: rotateZ(0deg)
        }
      }
      .dir_price {
        color: green;
        &:after {
          transform: rotateZ(180deg)
        }
      }
    }
  }

  menu {
    overflow: hidden;
    position: relative;
    height: 100%;
    padding-bottom: 1.2rem;
    ul {
      position: relative;
      background: white;
      margin-top: 0.1rem;
      overflow: auto;
      height: 100%;
      padding-bottom: 1rem;
      li {
        a {
          display: block;
          img {
            border: none;
            display: block;
            float: left;
            background: lightgreen;
          }
          div {
            position: relative;
            font-size: 0.4rem;
            color: black;
            font-weight: 100;
            h3 {
              height: 1.5em;
              font-size: 0.38rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              span:first-child {
                border: 1px solid darkred;
                padding: -0.1rem 0;
                margin-right: 0.2rem;
                font-size: 0.3rem;
                color: darkred;
              }
            }
            p {
              position: absolute;
              top: 1rem;
              color: grey;
            }
            & > span {
              &:before {
                content: "￥";
              }
              position: absolute;
              top: 2.3rem;
              color: red;
              font-size: 0.37rem;
            }
          }
        }
      }
      &:after {
        display: block;
        content: "no more...";
        text-align: center;
      }
    }
  }

  .other_style {
    li {
      border-bottom: 1px solid lightgrey;
      width: 100%;
      transition: width 0.5s;
      a {
        height: 3.05rem;
        img {
          width: 25%;
        }
        div {
          padding: 0.35rem 0.15rem;
          width: 75%;
          float: left;
          h3 {
            width: 95%;

          }
        }
      }
    }
  }
  .default_style {
    background: whitesmoke;
    ul {
      background: whitesmoke;
      li {
        width: 49.75%;
        background: white;
        margin-bottom: 0.1rem;
        a {
          padding-bottom: 0.5rem;
          img {
            width: 100%;
            transition: width 0.6s;
          }
          div {
            transition: 0.5s;
            padding: 0.35rem 0.15rem;
            width: 100%;
            float: left;
            position: relative;
            h3 {
              width: 95%;
              font-size: 0.32rem;
            }
            p {
              display: none;
            }
            & > span {
              position: absolute;
              top: 1rem;
            }
          }
        }
      }
      li:nth-child(odd) {
        float: left;
      }
      li:nth-child(even) {
        float: right;
      }
    }
  }

}

.clear:after {
  content: "";
  height: 0;
  visibility: visible;
  display: block;
  clear: both;
}

</style>
